<template>
    <div class="markdown-body" v-html="compiledMarkdown"></div>
</template>  
  
<script setup>
import { ref, computed } from "vue";
import { marked } from "marked";

// 假设这是从接口获取的 Markdown 内容
const props = defineProps({
    content: {
        type: String,
        default: '# 暂无内容'
    }
});

// 原始 markdown 数据，可以从后端接口获取
const markdownText = ref(`斜盘式轴向柱塞泵是一种常见的液压泵，其主要参数及其作用如下：

1. **柱塞泵种类**：表示柱塞泵的具体结构形式，包括斜盘式开式定量柱塞单泵、斜盘式开式变量柱塞单泵和斜盘式闭式变量柱塞单泵。选择不同的种类会影响泵的工作特性和应用场景。

2. **公称排量**（单位：mL/r）：指泵在最大排量下，每转所排出的液体体积。此参数对于确定泵的输出能力和系统需求至关重要。

3. **额定压力**（单位：MPa）：泵可稳定持续工作的压力。额定压力决定了泵能够承受的最大工作压力，是评估泵性能的重要指标之一。

4. **最高压力**（单位：MPa）：泵可短时工作的峰值压力。了解最高压力有助于确保泵在极端条件下的安全运行。

5. **最高转速**（单位：r/min）：泵吸油允许的最高转速。最高转速限制了泵的运行速度，影响系统的响应时间和效率。

6. **旋向**：从轴端视角看泵允许的旋转方向，分为左旋、右旋和双向。旋向的选择需与系统设计相匹配，以保证正常工作。

7. **增压泵**：表示泵是否内置增压泵。增压泵可以提高系统的压力水平，适用于需要更高压力输出的应用场景。

8. **串泵接口**：表示泵是否有串泵接口。串泵接口允许多个泵串联使用，增加系统的灵活性和扩展性。

9. **串泵接口规格**：具体描述串泵的花键及法兰接口规格，确保与其他设备的兼容性。

10. **补油泵**：表示泵是否集成补油泵。补油泵用于补充系统中的油液，保持系统的稳定运行。

11. **倾角传感器**：表示泵是否内置倾角传感器。倾角传感器可以监测泵的倾斜角度，有助于提高系统的安全性和可靠性。

12. **功率控制形式**：描述功率变量控制原理，包括功率全电控和恒功率两种形式。不同的功率控制形式适应不同的工作环境和需求。

13. **流量控制方式**：描述泵变流量控制原理，包括正流量控制、负流量控制、电比例控制、负载敏感+压力切断(带节流孔)和负载敏感+压力切断(不带节流孔)。流量控制方式直接影响泵的流量调节性能。

14. **压力控制方式**：表示泵是否内置压力切断装置。压力切断装置可以在达到设定压力时自动停止泵的工作，保护系统免受过压损害。

15. **法兰规格**：描述法兰接口规格，确保泵与其他设备的连接可靠。

16. **输入轴规格**：描述输入轴的规格标准，确保与驱动装置的匹配。

以上参数均为斜盘式轴向柱塞泵的关键技术指标，选择合适的参数值对于确保泵的性能和系统的稳定运行至关重要。如果您有特定的需求或疑问，请提供更详细的信息以便进一步指导。`);

// 将 Markdown 编译为 HTML
const compiledMarkdown = computed(() => {
    return marked.parse(markdownText.value);
});
</script>
  
<style>
.markdown-body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    padding: 16px;
}

.markdown-body pre {
    background: #f6f8fa;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
}

.markdown-body code {
    background: #f6f8fa;
    padding: 2px 4px;
    border-radius: 4px;
}
</style>